<template>
    <div class="left-canvas-view">
        <div class="svg-grid">
            <div 
                class="component-item component-item-svg" 
                v-for="(item) in componentListKey" 
                :key="item" 
                :data-component-name="item"
                :data-component-type="componentList[item].type"
            >
                <SvgComponent 
                    :width="getComponentSize(item).width" 
                    :height="getComponentSize(item).height" 
                    :component="componentList[item].component(getComponentSize(item))" 
                />
            </div>
        </div>
    </div>
</template>

<script>
import componentConfig from '@/componentConfig';
import SvgComponent from './svgComponent.vue';

export default {
    name: 'LeftD3CanvasView',
    components: {
        SvgComponent
    },
    props: {
        componentBaseSize: {
            type: Object,
            default: {
                arrow: {
                    width: 40,
                    height: 30
                },
                sector: {
                    width: 30,
                    height: 30
                }
            }
        },
        onReady: {
            type: Function
        }
    },
    data() {
        return {
            componentList: componentConfig,
            componentListKey:  [],
            componentSize: {}
        }
    },
    mounted() {
        this.componentSize = this.componentBaseSize;
        this.componentList = componentConfig;
        this.componentListKey = Object.keys(componentConfig);
        this.initSvg();
    },
    methods: {
        initSvg() {
           
            this.$nextTick(() => {
                this.onReady && this.onReady();
            })
        },
        getComponentSize(componentName) {  
            const component = this.componentList[componentName];
            if (component.type === 'arrow') {
                return {
                    width: 40,
                    height: 30
                }
            }
            if (component.type === 'sector') {
                return {
                    width: 30,
                    height: 30
                }
            }
         }
    }
}
</script>
<style scoped>
#LeftD3CanvasView {
    padding: 5px;
}

.left-canvas-view {
    width: 100%;
    padding: 0px;
}

.svg-grid {
    display: flex;
    flex-wrap: wrap;
}

.component-item {
    cursor: grab;
}

.component-item-svg {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.svg-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
